import React, { Component } from 'react';
import { NavBar, SearchBar, List, Ellipsis } from 'antd-mobile'
import { MoreOutline } from 'antd-mobile-icons'
import './Cate.scss'
import service from '../../api';


interface State {
    categorylist: string[],
    currentIndex: number,
    brandList: any[]
    proList: any
    category: any
}

class Cate extends Component<any, State> {
    constructor(props: any) {
        super(props);
        this.state = {
            categorylist: [],
            currentIndex: 1,
            brandList: [],
            proList: [],
            category: '',
        }
    }

    // 发请求
    async componentDidMount() {

        // 一级列表
        var res = await service.pro.categorylist({})
        // 品牌
        var data = await service.pro.categorybrandlist({ category: 'CPU' })
        // 品牌列表
        var resl = await service.pro.categorybrandprolist({ category: 'CPU', brand: 'AMD' })
        // console.log(resl);
        this.setState({
            categorylist: res.data.data,
            brandList: data.data.data,
            proList: resl.data.data
        })

    }


    // 品牌请求
    async pinpai(item: any, index: number) {
        var data = await service.pro.categorybrandlist({ category: item })
        console.log(data.data.data);
        this.setState({
            currentIndex: index,
            brandList: data.data.data,
        })
        data.data.data.map(async (items: any, index: any) => {
            console.log(items);
            var res = await service.pro.categorybrandprolist({ category: item, brand: items.brand })
            console.log(res);
            this.setState({
                proList: res.data.data
            },()=>{
                console.log(this.state.proList);
                
            })

        })
    }

    // 跳详情页
    toDetail(id: any) {
        // console.log(id);
        this.props.history.push({ pathname: '/detail', state: { id } })
    }


    render() {
        return (
            <div className='cate'>
                {/* 顶部导航 */}
                <div className="top">
                    <NavBar right={<MoreOutline style={{ fontSize: 35 }} />}>分类</NavBar>
                    <div className="search" onClick={() => this.props.history.push('/search')}>
                        <SearchBar placeholder='搜索店铺内商品' />
                    </div>
                </div>

                {/* 主要内容 */}
                <div className="main">
                    {/* 一级列表 */}
                    <div className="left">
                        {
                            this.state.categorylist.map((item, index) => {
                                return (
                                    <div className={'box ' + (this.state.currentIndex == index ? 'active' : '')} key={index} onClick={() => { this.pinpai(item, index) }}>{item}</div>
                                )
                            })
                        }

                    </div>

                    {/* 品牌列表 */}
                    <div className="rigth">
                        {
                            this.state.brandList.map((item, index) => {
                                return (
                                    <div className='box1' key={index}>
                                        <h2 >{item.brand}</h2>
                                        {
                                            this.state.proList.map((items: any, index: any) => {
                                                return (
                                                    <div className="box2" key={index} onClick={() => { this.toDetail(items.proid) }}>
                                                        <img src={items.img1} alt="" />
                                                        <Ellipsis className="name" rows={2} direction='end' content={items.proname} />
                                                    </div>
                                                )
                                            })
                                        }
                                    </div>

                                )
                            })
                        }
                    </div>
                </div>
            </div>
        );
    }
}

export default Cate;